<template>
  <div id="add">
    <div class="bgc">
      <!-- 搜索部分 -->
      <Searhch @onSearch="onSearch" />

      <!-- 表格部分 -->
      <div class="table">
        <div class="butten-left">
          <el-button
            type="success"
            class="but"
            @click="addhouse"
          >新增仓库</el-button>
          <div class="butten-right">
            <el-button
              type="success"
              class="but1"
              @click="exportExcel"
            >下载库区模板</el-button>
            <el-button
              type="success"
              class="but1"
              @click="UploadFn"
            >导入库区信息</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div style="margin-top: 20px">
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            strip
            style="width: 100%"
            height="318px"
            :row-class-name="tableRowClassName"
            :header-cell-style="{
              background: '#fff6e2',
            }"
          >
            <el-table-column
              fixed
              prop="date"
              align="center"
              label="序号"
              width="50"
              type="index"
            />
            <el-table-column
              width="100"
              align="center"
              prop="warehouseName"
              label="所属仓库"
            />
            <el-table-column
              align="center"
              prop="code"
              label="库区编号"
              width="100"
            />
            <el-table-column
              align="center"
              prop="name"
              label="库区名称"
              width="160"
            />
            <el-table-column align="center" label="温度类型" width="100">
              <template #default="scope">
                {{ type[scope.row.temperatureType] }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="承重类型" width="120">
              <template #default="scope">
                {{ bearing[scope.row.bearingType] }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="用途属性" width="200">
              <template #default="scope">
                {{ useType[scope.row.useType] }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="库区状态"
              width="120"
            >
              <template #default="scope">
                {{ status[scope.row.status] }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="personName"
              label="负责人"
              width="120"
            />
            <el-table-column
              align="center"
              prop="phone"
              label="联系电话"
              width="120"
            />
            <el-table-column
              align="center"
              prop="includedNum"
              label="库位数量"
              width="120"
            />
            <el-table-column
              align="center"
              prop="updateTime"
              label="更新时间"
              width="140"
            />
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="160"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                >编辑</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="stopFn(scope.row)"
                >{{ statuses[scope.row.status] }}</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="delFn(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 导入库区信息弹窗 -->
        <ImportArea :visible="visibles" @close="visibles = false" />

        <!-- 启用、停用弹窗 -->
        <Dialog
          :visible="visible"
          :vals="vals"
          @close="visible = false"
          @update="fearchImformationList()"
        />

        <!-- 分页 -->
        <Page v-if="flag" :data="data" @update="updateFn" />
      </div>
    </div>
  </div>
</template>

<script>
import { getWarehouseList, delHouse } from '@/api'
import Searhch from '@/components/Search'
import Page from '@/components/Paging'
import { getExportData } from '@/utils/excel'
import Dialog from './components/dialog'
import ImportArea from './components/importAreaDialong.vue'
import { Message } from 'element-ui'
export default {
  name: 'Imformation',
  components: {
    Searhch,
    Page,
    Dialog,
    ImportArea
  },
  data() {
    return {
      // 搜索传入的数值
      pageOption: {
        current: 1,
        size: 10
      },
      flag: false,
      visible: false,
      visibles: false,
      loading: false,
      vals: {},
      data: {},
      // 温度类型枚举
      type: {
        CW: '常温',
        LC: '冷藏',
        HW: '恒温'
      },
      // 承重类型枚举
      bearing: {
        ZX: '重型',
        QX: '轻型',
        OX: '中型'
      },
      // 用途属性枚举
      useType: {
        RKHCQ: '入库缓存区',
        CKHCQ: '出库缓存区',
        CCQ: '存储区',
        FJQ: '分拣区',
        ZJQ: '质检区'
      },
      // 库区状态枚举
      status: {
        1: '启用',
        0: '停用'
      },
      // 相反状态枚举
      statuses: {
        0: '启用',
        1: '停用'
      },
      currentPage: 3,
      tableData: []
    }
  },
  created() {
    this.fearchImformationList()
  },
  methods: {
    // 封装列表数据
    // 调用接口、请求数据
    // 将数据传给子组件
    // 由于父子传值为同步、数据请求、dom更新为异步
    // 数据未请求父组件已经向子组件传值
    // 所以要将父子传值变成异步的
    // 所以我们定义一个flag，
    // 初始值为false，数据请求成功改为true
    // 使用v-if“flag”来控制子组件的显示已隐藏
    // 当“flag”为true的时候证明数据请求成功
    // 显示子组件
    // data是分页器组件
    async fearchImformationList(val) {
      this.loading = true
      const { data } = await getWarehouseList({
        ...val,
        ...this.pageOption
      })
      // console.log(data.data.records)
      this.tableData = data.records
      this.data = data
      this.loading = false
      this.flag = true
    },

    // 点击搜索
    // 通过子组件的值进行搜索
    onSearch(val) {
      this.fearchImformationList(val)
    },

    // 点击新增仓库
    // 跳转到新增仓库页面
    addhouse() {
      this.$router.push({ name: 'addhouse2', params: { id: 'null' }})
    },

    // 点击上传库区模板
    UploadFn() {
      this.visibles = true
    },

    // 导出功能
    async exportExcel() {
      // 动态引入 @/vendor/Export2Excel 文件
      import('@/vendor/Export2Excel').then(async excel => {
        // 调用员工列表接口，获取要导出的员工列表
        const res = await getWarehouseList(this.pageOption)
        // 数据转换
        // 表头
        const headerArr = ['所属仓库', '库区编号', '库区名称', '温度类型', '承重类型', '用途属性', '库区状态', '负责人', '联系电话', '库位数量', '更新时间']
        // 中英对照关系
        const headerRelation = {
          '所属仓库': 'warehouseName',
          '库区编号': 'code',
          '库区名称': 'name',
          '温度类型': 'temperatureType',
          '承重类型': 'bearingType',
          '用途属性': 'useType',
          '库区状态': 'status',
          '负责人': 'personName',
          '联系电话': 'phone',
          '库位数量': 'includedNum',
          '更新时间': 'updateTime'
        }
        const twoArr = getExportData(res.data.records, headerArr, headerRelation)
        excel.export_json_to_excel({
          // 表头 header 必填，是一个数组
          header: headerArr,
          // 表格 body 具体数据，是一个二维数组
          data: twoArr,
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },

    // 点击编辑
    // 跳转编辑页面
    // 传入id值
    // 通过id请求接口，实现数据回显
    handleClick(row) {
      console.log(row)
      this.$router.push({ name: 'addhouse2', params: { id: row.id }})
    },

    // 停用按钮
    stopFn(val) {
      this.visible = true
      this.vals = val
    },

    // 删除事件
    // 点击删除
    // 二次询问是否要删除
    // 传入当前行的id
    // 删除成功、提示用户
    // 更新页面
    async delFn(id) {
      console.log(id)
      this.$confirm('此操作将会删除库区, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delHouse(id)
          this.fearchImformationList()
          Message.success('删除成功')
        })
        .catch(() => {
        })
    },

    // 分页器子组件页码改变
    // 通知父组件重新调用接口
    // 更新改变页面的数据
    updateFn(val) {
      this.pageOption.current = val
      this.fearchImformationList()
    },

    // 表格隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return 'success-row' // 这是类名
      } else {
        return ''
      }
    }
  }
}
</script>
<style>
/* 表格高度 */
.el-table td {
  padding: 5px 0 0 0;
}
.el-table th {
  padding: 8px 0 5px;
}
.el-input .el-input__inner {
  height: 35px;
  line-height: 40px;
  background: #f8f5f5;
  border-radius: 6px;
}
/* 关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改 */
.el-table tbody tr:hover > td {
  background-color: #fff6e2;
}

/* 隔行变色 */
.success-row {
  background-color: #fdfcf9 !important;
}
</style>

<style lang="scss" scoped>
.bgc {
  overflow: hidden;
  background-color: #f1ecec;
  padding: 0px 20px 20px;
}
// 表格
.table {
  padding: 20px 0;
  background-color: #fff;
  border-radius: 6px;
  .butten-left {
    // display: flex;q
    overflow: hidden;
    .but {
      margin-left: 30px;
      width: 100px;
      border-radius: 40px;
      background: #00be76;
    }
  }
  .butten-right {
    // margin-left: 600px;
    float: right;
    margin-right: 22px;
    .but1 {
      background: #f8f5f5;
      color: #332929;
      width: 180px;
      height: 38px;
      border-radius: 20px;
      border: 0;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      line-height: 13px;
      padding-left: 26px;
      padding-right: 26px;
      cursor: pointer;
      outline: 0;
    }
  }
  .el-table {
    font-size: 12px;
    color: #332929;
  }
}
</style>
